<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="../../js/mui.min.js"></script>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../../css/AddDevice_3.css"/>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<div>
			
			<h1 class="mui-title">新增设备</h1>
		</div>
	</header>
	<div class="flowChart">
		<div class="flowChartImg">
			<div class="selectIMGY">
				<h4>1</h4>
			</div>
			<div class="flowChartLine_1"></div>
			<div class="selectIMGY">
				<h4>2</h4>
			</div>
			<div class="flowChartLine_1"></div>
			<div class="selectIMGY">
				<h4>3</h4>
			</div>
			<div class="flowChartLine_2"></div>
			<div class="selectIMGX">
				<h4>4</h4>
			</div>
			<div class="flowChartLine_2"></div>
			<div class="selectIMGX">
				<h4>5</h4>
			</div>
			
		</div>
		<div class="flowChartText">
			<div>
				<h5 class="flowChartText_3">归属信息</h5>
			</div>
			<div>
				<h5 class="flowChartText_3">基本信息</h5>
			</div>
			<div>
				<h5 class="flowChartText_2">个性信息</h5>
			</div>
			<div>
				<h5 class="flowChartText_1">信息确认</h5>
			</div>
			<div>
				<h5 class="flowChartText_1">新增成功</h5>
			</div>
		</div>
	</div>
    <div class="DeviceOwnership">
		<div class="ownerShipMain">
			<div>
				<h3>设备个性化信息</h3>
				
			</div>
			
		</div>
		<div class="ownerShipMain inputMain">
			<div>
				<h3>资产编号</h3>
			</div>
			<div class="ownerShipMainInput">
				<input id="AssetNumberDom" type="text" class="DeviceInput" placeholder="请输入资产编号">
			</div>
		</div>
		
		<div id="SelectDate" href="#hospPopover" class="ownerShipMain">
			<div>
				<h3>出厂日期</h3>
			</div>
			<div class="ownerShipMainSelected">
				
				<a class="mui-icon mui-icon-forward"></a>
				<a id="date">请选择出厂日期</a>
				
			</div>
			
		</div>
		<div href="#hospPopover" class="ownerShipMain" >
			<div>
				<h3>设备状态</h3>
			</div>
			<div class="ownerShipMainSelected">
				
				<a class="mui-icon mui-icon-forward"></a>
				<a id="hospital">请选择设备状态</a>
				
			</div>
			
		</div>
		
		
		
		
		<div class="ownerShipMain largeMain">
			<div class="largeMainTitle">
				<h3>设备图片</h3>
			</div>
			<div id="largeMainAreaFather" class="largeMainAreaFather" >
				<div id="myImgDiv" class="largeMainArea">
					<img id="addImg" class="addImg" src="../../images/drawable-hdpi/eq_add_pic.png" onclick="picPage.imgUp()"/>
					
				</div>
			</div>
		</div>
		
		
		<div class="ownerShipMain textAreaMain">
			<div class="textAreaMainTitle">
				<h3>设备描述</h3>
			</div>
			<div class="textAreaMainArea">
				<textarea id="textarea" rows="5" placeholder="请把设备内容描述清楚"></textarea>
				<p>限200字以内</p>
			</div>
		</div>
		
		
		<button type="button" class="mui-btn mui-btn-royal mui-btn-block" onclick="judgeCant()">下一步</button>
		
	</div>
    <div id="mainPopover" class="mui-popover">
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul id="mianUl" class="mui-table-view mui-table-view-radio"></ul>
			</div>
		</div>
	</div> 
    
    <script src="../../js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
	
	
	<script type="text/javascript" charset="UTF-8">
      	mui.init();
      	mui.previewImage();
      	//在此声明一个对象用于获取上个页面传输来的值
        var self;
        //声明一个参数用于记录现在的button状态
        var beSelected=false;
        //声明变量记录想要的各个参数(资产编号，出厂日期，设备状态，个性化图片url，设备描述)
        var AssetNumber="",productionDate="",equipmentState="",customImgURL="",DeviceDescription="";
        var DeviceImgUrlArr=[];
        var imageUploadUrl = "http://app.xiaoweicanting.com/hospital.php?m=App&c=equipment&a=uploadImg";
      	//给其绑定时间控件
      	document.getElementById("SelectDate").addEventListener('tap', function() {
			var dDate = new Date();
			//dDate.setFullYear(date.getFullYear(), dDate.getMonth(), dDate.getDate());
			var minDate = new Date();
			minDate.setFullYear(2000, 0, 1);
			var maxDate = new Date();
			maxDate.setFullYear(2020, 11, 31);
			plus.nativeUI.pickDate(function(e) {
				var d = e.date;
				document.getElementById("date").innerText = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
				//在这里获取出厂日期
				productionDate=d;
				//判断是否所有数据已经被赋值
				judgebutton();
			
	
				
			}, function(e) {
				mui.toast('您没有选择日期');
				
			}, {
				title: "请选择日期",
				date: dDate,
				minDate: minDate,
				maxDate: maxDate
			});
		})
      	
      	//声明一个方法用于获取设备状态数据
      	var getEquState=function(url){
      		
      	}
      	document.getElementById("AssetNumberDom").addEventListener('input',function(){
      		AssetNumber=this.value;
      		
      		//检测是否所有的数据已经被赋值，若已经赋值，则改变按钮颜色，并使其可以点击
      		judgebutton();
      	},false);
      	
      
      	document.getElementById("textarea").addEventListener('input',function(){
      		
      		DeviceDescription=this.value;
      		judgebutton();
      	},false)
      	
  		//声明一个方法用于判断是否所有的数据都已被赋值
      	var judgebutton=function(){
      		
      		if((AssetNumber!="")
      			&&(productionDate!="")
      			// &&(customImgURL!="")
      			&&(DeviceDescription!="")){
      			    document.querySelector('.mui-btn').style.backgroundColor="#498af7";
      			    document.querySelector('.mui-btn').addEventListener('click',onPress,false);
      			    beSelected=true;
      		}
      		else{
      			
      			
      			if(beSelected){
      				
      				document.querySelector('.mui-btn').removeEventListener('click',onPress,false);
      				document.querySelector('.mui-btn').style.backgroundColor="rgba(73,138,247,0.3)";
      				beSelected=false;
      			}
      			
      		}
      	}
      	
      	var judgeCant=function(){
      		if((AssetNumber=="")
      			||(productionDate=="")
      			// ||(customImgURL=="")
      			||(DeviceDescription=="")){
      			mui.toast('请在填写完毕后点击下一步');
      		}
      		
      	}
      	//声明一个对象用于显示拍照功能框
      	var picPage=null;  
      	
      	picPage={  
            imgUp:function(){  
                var m=this;  
                //生成手机原生选择框ui
                plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
                    {title:"拍照"},  
                    {title:"从相册中选择"}  
                ]}, function(e){//1 是拍照  2 从相册中选择  
                    switch(e.index){  
                    	//拍照并显示
                        case 1:clickCamera();
                        
                        break;
                        //从相册选取
                        case 2:clickGallery();
                        
                        break;
                        default: 
                        //出错时
                        break; 

                    }  
                });  
            }  
            //摄像头  
        }  
        
      	//获取照相机方法
      	var clickCamera=function(){
      		//获取设备默认摄像头元素
      		var cmr = plus.camera.getCamera();
      		//摄像头支持像素
	        var res = cmr.supportedImageResolutions[0];
	        //支持的图片格式
	        var fmt = cmr.supportedImageFormats[0];
	        //拍照回掉函数
	        cmr.captureImage(
	        	function(path){//拍照成功的情况下
		        	//从h5暂存数据区域得到想要的图片
		        	plus.io.resolveLocalFileSystemURL(path, function(entry){//在成功的情况下
		        		//显示刚拍摄好的照片
		        		compressImage(path);
		        		judgebutton();
		        	},

		        	function(e){//在读取拍照文件失败的情况下
		        		outLine("读取拍照文件错误：" + e.message);
		        	});
		        },
		        function(err){//拍照失败的情况下
		        	
		        	outLine(err.message);
		        },
		        {
		            resolution: res,
		            format: fmt
		        }
	        );
	        
      	}
      	//打开相册方法
      	var clickGallery=function(){
      		
      		//调用打开相册的方法
      		plus.gallery.pick(
      			function(path){//获取成功的情况下
      				
      				plus.io.resolveLocalFileSystemURL(path, function(entry){
      					compressImage(path);
      					judgebutton();
      				},
		        	function(e){//在读取拍照文件失败的情况下
		        		outLine("读取相册照片失误错误：" + e.message);
		        	});
      				
      			},
      			function(err){//打开相册的情况下的情况下
		        	
		        	outLine(err.message);
		        },
      			{}
      			
      		);
      		
      	}
      	
      	//声明一个方法用于以给定的dom节点和url生成需要的照片
      	var creatImg=function(url,dom){
        	if(url==""){
        		return false;
        	}
        	if(DeviceImgUrlArr.length===5){
        		mui.toast('添加图片已至上限');
        		
        		return false;
        	}
        	var imgDom,divDom,deletedDom,fatherDom,textDom;
        	divDom=document.createElement("div");
        	divDom.className='largeMainDiv';
        	deletedDom=document.createElement("div");
        	deletedDom.className='largeMainDivDelet';
        	imgDom=document.createElement("img");
        	imgDom.src = "http://app.xiaoweicanting.com" + url.slice(1);
        	DeviceImgUrlArr.push(imgDom.src);
        	imgDom.className='largeMainImg';
        	textDom=document.createTextNode("x");
        	imgDom.setAttribute("data-preview-group","1");
        	imgDom.setAttribute("data-preview-src","");
        	
        	deletedDom.appendChild(textDom);
        	divDom.appendChild(deletedDom);
        	divDom.appendChild(imgDom);
        	deletedDom.id=DeviceImgUrlArr.length-1;
        	
        	fatherDom=document.getElementById(dom);
        	
        	
        	
    		fatherDom.style.width=75*DeviceImgUrlArr.length+82+"px";
        	
        	
			//document.getElementById("largeMainAreaFather").style.width=document.documentElement.clientWidth+"px";
			
			fatherDom.appendChild(divDom);
			deletedDom.addEventListener('click',function(){
				var i=DeviceImgUrlArr.length;
				fatherDom.removeChild(divDom);
				DeviceImgUrlArr.splice(this.id,1);
				fatherDom.style.width=75*DeviceImgUrlArr.length+82+"px";
				 
				
			},false);
			
        }
      	
      	var uploadImage = function(path) {
		    var uploader = plus.uploader.createUpload(imageUploadUrl, {
		        method: "POST"
		    }, function(upload, status) {
		                // alert(upload.responseText);
			    var data = JSON.parse(upload.responseText);
			    if(data.state ==  "success") {
	                mui.toast("上传成功！");
	                clearZip();
	                plus.nativeUI.closeWaiting();
	                creatImg(data.url, "myImgDiv");
	            } else {
	                mui.toast("上传失败！");
	            }
		    });
		      // var name = "imageTmpNmae" + Math.random().toFixed(4);
		    uploader.addFile(path, {key: "headimg"});
		    uploader.addData("userid", "4");
		    uploader.start();
		} 

		//压缩照片
        var compressImage = function(imagePath) {
       // outSet("开始压缩图片：");
            var imageName = imagePath.substr(imagePath.lastIndexOf("/") + 1);
            plus.nativeUI.showWaiting();
            plus.zip.compressImage({
                src: imagePath,
                dst: "_doc/" + imageName,
                overwrite: true,
                quality: 10
            },
            function(zip){
            uploadImage(zip.target);
            }, function(e){
                alert("压缩失败");
                plus.nativeUI.closeWaiting();
                // outLine("压缩图片失败: "+JSON.stringify(e));
            });
        }

		//清除压缩之后的照片
        var clearZip = function (){
            plus.io.resolveLocalFileSystemURL( "_doc/", function(entry){
            entry.removeRecursively();
            });
        }
      	//页面跳转按钮事件
      	var onPress = function(){
      		
  			mui.openWindow({
		    url:'AddDevice_4.html',
		    id:'AddDevice_4.html',
		    extras:{
		    	
		        Hospital:self.Hospital,
		        HospitalId:self.HospitalId,
		        Dep:self.Dep,
		        DepId:self.DepId,
		        People:self.People,
		        PeopleId:self.PeopleId,
		        DeviceType:self.DeviceType,
		        DeviceModel:self.DeviceModel,
		        typeId:self.typeId,
		        modelId:self.modelId,
		        DeviceName:self.DeviceName,
		        deviceFactoryInfo:self.deviceFactoryInfo,
		        DeviceArea:self.DeviceArea,
		        basicImgURL:self.basicImgURL,
		        deviceTypeTwo: self.deviceTypeTwo,
                deviceTypeThree: self.deviceTypeThree,
                DeviceInf: self.DeviceInf,
		        AssetNumber:AssetNumber,
		        productionDate:productionDate,
		        equipmentState:equipmentState,
		        customImg:DeviceImgUrlArr,
		        DeviceDescription:DeviceDescription
		    },
		    styles:{
				scrollIndicator: 'none'
			}
			});
      		
      	}
      	
      	//运行getEquState并获得数据填充设备状态弹出框
      	getEquState();
      	
  		//在此获取上一个页面传输过来的值
  		mui.plusReady(function() {  
  			//在此获取上一个页面传输的值
            self = plus.webview.currentWebview();  
            
        });  
      	
      	
      	
    </script>
</body>
</html>